<template>
    <div class="account-box">
      <div class="form">
        <div class="form-item">
          <div class="input">
            <i class="iconfont icon-user"></i>
            <input type="text" v-model="loginForm.account" placeholder="请输入用户名或手机号" />
          </div>
          <!-- 表单验证错误信息提示 -->
          <!-- <div class="error"><i class="iconfont icon-warning" />请输入手机号</div> -->
        </div>
        <div class="form-item">
          <div class="input">
            <i class="iconfont icon-lock"></i>
            <input type="password" placeholder="请输入密码" v-model="loginForm.password" />
          </div>
        </div>
        <div class="form-item">
          <div class="agree">
            <XtxCheckbox v-model="flag"/>
            <span >我已同意</span>
            <a href="javascript:;">《隐私条款》</a>
            <span>和</span>
            <a href="javascript:;">《服务条款》</a>
          </div>
        </div>
        <a href="javascript:;" class="btn" @click="handleLogin">登录</a>
      </div>
      <div class="action">
        <!-- <span id="btn-qq-login"></span> -->
        <!-- 跳转到 QQ登入页面 -->
        <a href="https://graph.qq.com/oauth2.0/authorize?client_id=100556005&response_type=token&scope=all&redirect_uri=http%3A%2F%2Fwww.corho.com%3A8080%2F%23%2Flogin%2Fcallback">
          <img
          src="https://qzonestyle.gtimg.cn/qzone/vas/opensns/res/img/Connect_logo_7.png"
          alt=""
        />
        </a>
        <div class="url">
          <a href="javascript:;">忘记密码</a>
          <a href="javascript:;">免费注册</a>
        </div>
      </div>
    </div>
  </template>
<script>
import { reactive, ref } from 'vue'
import { message } from '@/components/Message'
import { useStore } from 'vuex'
import { useRouter, useRoute } from 'vue-router'
// 导入 QQ互联的包
// import QC from 'qc'
export default {
  name: 'LoginForm',
  setup () {
    // 注意：use开头的的组合式API，需要在setup中调用
    // 创建store实例
    const store = useStore()
    // 创建router实例
    const router = useRouter()
    // 创建route实例
    const route = useRoute()
    // 登录表单
    const loginForm = reactive({
      account: '',
      password: ''
    })
    // 复选框是否勾上
    const flag = ref(false)

    // 登录
    const handleLogin = async () => {
      const { account, password } = loginForm
      // 校验用户名
      if (!account) {
        return message({ type: 'error', text: '用户名不能为空' })
      }
      // 校验密码
      if (!password) {
        return message({ type: 'error', text: '密码不能为空' })
      }
      // 是否勾选
      if (!flag.value) {
        return message({ type: 'error', text: '请勾选我已同意' })
      }
      // 发起登录请求
      await store.dispatch('user/updateProfileAction', loginForm)

      // 提示
      message({ type: 'success', text: '登录成功' })
      // 登录成功，触发合并购物车Action
      await store.dispatch('car/mergeLocalCartAction')
      // 跳转至首页
      // route.query.redirectUrl :获取跳转登录前的当前页面路径参数
      // 如果有路径参数，则回跳至这个页面地址，如果没有进入首页
      router.replace(route.query.redirectUrl || '/')
    }

    return {
      loginForm,
      flag,
      handleLogin

    }
  }
}
</script>
  <style lang="less" scoped>
  // 账号容器
  .account-box {
    .toggle {
      padding: 15px 40px;
      text-align: right;
      a {
        color: @xtxColor;
        i {
          font-size: 14px;
        }
      }
    }
    .form {
      padding: 0 20px;
      &-item {
        margin-bottom: 28px;
        .input {
          position: relative;
          height: 36px;
          > i {
            width: 34px;
            height: 34px;
            background: #cfcdcd;
            color: #fff;
            position: absolute;
            left: 1px;
            top: 1px;
            text-align: center;
            line-height: 34px;
            font-size: 18px;
          }
          input {
            padding-left: 44px;
            border: 1px solid #cfcdcd;
            height: 36px;
            line-height: 36px;
            width: 100%;
            &.error {
              border-color: @priceColor;
            }
            &.active,
            &:focus {
              border-color: @xtxColor;
            }
          }
          .code {
            position: absolute;
            right: 1px;
            top: 1px;
            text-align: center;
            line-height: 34px;
            font-size: 14px;
            background: #f5f5f5;
            color: #666;
            width: 90px;
            height: 34px;
            cursor: pointer;
          }
        }
        > .error {
          position: absolute;
          font-size: 12px;
          line-height: 28px;
          color: @priceColor;
          i {
            font-size: 14px;
            margin-right: 2px;
          }
        }
      }
      .agree {
        a {
          color: #069;
        }
      }
      .btn {
        display: block;
        width: 100%;
        height: 40px;
        color: #fff;
        text-align: center;
        line-height: 40px;
        background: @xtxColor;
        &.disabled {
          background: #cfcdcd;
        }
      }
    }
    .action {
      padding: 20px 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .url {
        a {
          color: #999;
          margin-left: 10px;
        }
      }
    }
  }
  </style>
